<template>
<div>
  <div>
    <el-card>
      <el-button type="text" style="float:right" @click="open">{{isShow===true?'隐藏':'显示'}}</el-button>
      <slot name="lastBtn"></slot>
    </el-card>
  </div>
  <el-card v-show="isShow" class="mod-filter box-card" v-if="!datas.noFilter">
    <div slot="header" class="clearfix">
        <i class="el-icon-search"></i>
        <span>筛选搜索</span> 
        <el-button type="primary"  size="mini"  style="float:right" @click="onSubmit" v-if="searchCon.length>0">查询</el-button>
        <el-button size="mini"  style="float:right;margin-right: 15px" type="primary" @click="resetForm('datas')" v-if="searchCon.length>0">重置</el-button>
        <el-dropdown :hide-on-click="false"  :show-timeout="100" trigger="click" style="float:right;padding-left:5px">
            <el-button plain size="mini" >
              高级查询({{searchCon.length}})
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </el-button>
            <el-dropdown-menu class="no-border" slot="dropdown">
              <el-checkbox-group v-model="searchCon" style="padding: 5px 15px;">
                <el-checkbox v-if="!item.isSearchHide" v-for="item in datas.filterList" :checked="item.conditionshow"  :label="item.prop" :key="item.key" @change="changeSearchCondition">
                  {{item.label}}
                </el-checkbox>
              </el-checkbox-group>
            </el-dropdown-menu>
          </el-dropdown>
        <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click" style="float:right;padding-left:3px">
            <el-button plain size="mini" >
            显示
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </el-button>
          <el-dropdown-menu class="no-border" slot="dropdown">
            <el-checkbox-group v-model="showFiled" style="padding: 5px 15px;">
              <el-checkbox v-if="!item.just || item.just.field " v-for="item in datas.filterList" :label="item.prop" :checked="item.filedShow" :key="item.key" @change="changeTableFiled">
                {{item.label}}
              </el-checkbox>
            </el-checkbox-group>
          </el-dropdown-menu>
        </el-dropdown> 
        <!-- <slot name="lastBtn"></slot> -->
    </div>
    <el-form size="mini" :inline="true" :model="datas" ref="datas"  label-width="140px" style="margin-top: 25px" class="demo-form-inline">
      <slot name="manyBtn"></slot>
      <el-form-item v-if="item.conditionshow" v-for="(item,index) in datas.filterList" :key="index" :label="item.label" :prop="item.prop">
        <el-input v-if="item.type=='input'" v-model="item[item.prop]" :placeholder="item.placeholder"></el-input>
        <el-select :clearable="true" v-if="item.type=='select'" v-model="item[item.prop]" :placeholder="item.placeholder">
          <el-option v-for="(optItem,index) in item.optList" :key="index" :label="optItem.label" :value="optItem.value"></el-option>
          <el-option v-for="(key,value) in item.conv" :key="key" :label="item.conv[value]" :value="value"></el-option>
        </el-select>
        <el-date-picker value-format="yyyy-MM-dd" v-if="item.type=='date' && !item.conditionSpace" v-model="item[item.prop]" type="date" placeholder="选择日期"></el-date-picker>
        <el-date-picker value-format="yyyy-MM-dd" v-if="item.type=='date' && item.conditionSpace" v-model="item[item.prop1]" type="date" placeholder="开始日期"></el-date-picker>
        <el-date-picker value-format="yyyy-MM-dd" v-if="item.type=='date' && item.conditionSpace" v-model="item[item.prop2]" type="date" placeholder="结束日期"></el-date-picker>
        <el-date-picker
            v-if="item.type=='daterange'" v-model="item[item.dateProp]"
            type="datetimerange"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions2"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
      </el-date-picker>
      </el-form-item> 
      
    </el-form>
    
    <slot name="operating"></slot>
  </el-card>


  <el-table class="mt10" :data="datas.resData.rows" border fit highlight-current-row
    @sort-change="sortHandler" v-loading="datas.table.loading" ref="table"
    @selection-change="handleSelectionChange"
    @row-click="rowClick"
  >
  <el-table-column v-if="datas.table.selection"
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column sortable v-if="rowItem.filedShow && (!rowItem.just || rowItem.just.field) " v-for="(rowItem ,rowIdx ) in datas.filterList" :prop="rowItem.prop" :key="rowIdx" :label="rowItem.label" align="center"  :type="rowItem.type">
     <template slot-scope="scope">
       <slot v-if="rowItem.slot==true" :name="rowItem.prop" :value="scope.row" ></slot>
       <span v-else-if="!!rowItem.image"><img :src="scope.row[rowItem.prop]" /></span>
        <span v-else-if="!rowItem.filter && !rowItem.conv">{{scope.row[rowItem.prop]}}</span>
        <span v-else-if="!!rowItem.conv">{{rowItem.conv[scope.row[rowItem.prop]]}}</span>
        <span v-else>{{scope.row[rowItem.prop] | rowItem.filter}}</span>


      </template>
    </el-table-column> 
  </el-table>
  <!-- <slot name="table" class="mt10"></slot> -->

  <div v-if="!datas.noPage" class="mod-pagination mt10">
    <el-pagination background prev-text="上一页" next-text="下一页" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="datas.params.page"
      :page-sizes="[10,20,30,50]" :page-size="datas.params.size" layout="total, sizes, prev, pager, next, jumper"
      :total="datas.resData.recordsTotal">
    </el-pagination>
  </div>
</div>
</template>

<script>
// filterList: 搜索条件
// noPage: 是否分页
// nosubmit:是否显示查询
// noresetForm:是否显示重置
// resData: api返回数据
// other
import { getReqModel } from './utils'

export default {
  props: {
    datas: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      isShow: false,
      showTextList: ['显示', '隐藏'],
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      searchCon: [],
      showFiled: []
    }
  },
  methods: {
    rowClick(row, event, column) {
      // this.$set(this.datas,'rowClickData',row)
      this.$emit('rowClick', row)
      // this.datas['rowClickData']=row
    },
    handleSelectionChange(val) {
      this.datas.multipleSelection = val
    },
    changeSearchCondition(value, event) {
      const filedName = event.target.value
      this.datas.filterList.forEach(row => {
        if (row.prop === filedName) {
          row['conditionshow'] = value
        }
      })
    },
    changeTableFiled(value, event) {
      const filedName = event.target.value
      this.datas.filterList.forEach(row => {
        if (row.prop === filedName) {
          row['filedShow'] = value
        }
      })
    },
    sortHandler(field, event) {
      this.datas.sort = {
        prop: field.column.property,
        order: field.order
      }
      this.$emit('query', this.datas, getReqModel(this.datas))
    },
    headerClick(column, event) {
      const isItme = _.find(this.datas.filterList, {
        prop: column.property
      })

      if (isItme) isItme.show = !isItme.show
    },
    onSubmit() {
      this.$emit('query', this.datas, getReqModel(this.datas))
    },
    resetForm(formName) {
      this.$refs[formName].model.filterList.forEach((item, index, ary) => {
        if (item.hasOwnProperty('prop')) item[item.prop] = null
        if (item[item.dateProp]) item[item.dateProp] = []
      })
    },
    buildArg(v, a) {
      return v
    },
    handleSizeChange(val) {
      // 切换页码
      this.datas.resData.size = val
      this.$emit('query', this.datas, getReqModel(this.datas))
    },
    handleCurrentChange(val) {
      // 切换每页显示数量
      this.datas.resData.number = val - 1
      this.$emit('query', this.datas, getReqModel(this.datas))
    },
    getLookUpList(type, index) {
      return this.$store.dispatch('GetlookUp', type).then(res => {
        this.filterList[index].optList = res.data
        // _.forEach(res.data, (item, index) => {
        //   this[key].push({
        //     label: item.meaning,
        //     value: item.lookupCode
        //   })
        // })
        // _.find(this.datas.filterList, {
        //   prop: prop
        // }).optList = this[key]
      })
    },
    open() {
      this.isShow = !this.isShow
    }
  },
  created() {
    this.onSubmit()
  }
}
</script>

<style lang="css">
</style>
